<!-- 显示信息的插槽 -->
<template>
  <div class="info-slot">
    <div class="lable"><slot name="lable"><span>*</span></slot></div>
    <div class="name"><slot name="name"></slot></div>
    <div class="content1"><slot name="content1"></slot></div>
    <div class="content2">
      <slot name="content2">
        <img src="~assets/img/profile/right_arrow.svg" alt="" />
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "InfoSlot",
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style scoped>
.info-slot {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 15px;
  display: flex;
  position: relative;
  align-items: center;
  text-align: 15px;
  justify-content: space-between;
  font-size: 14px;
}
.info-slot::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 15px;
  height: 1px;
  border-top: 1px solid #e5e5e5;
  color: #e5e5e5;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.lable {
  color: red;
}
.name {
  padding: 0 5px;
}
.content1 {
  color: #ccc;
  margin-left: auto;
}
.content2 {
  margin-left: 15px;
}
.content2 img{
  width: 15px;
}
span{
  color: #fff;
}
</style>